<template>
  <div class="myhome">

    <div class="myhome-box">
      <transition name="tb">

        </transition>
      <div class="myhome-header">

        <div class="myhome-back" @click="goBack">
          <span class="iconfont">&#xe60c;</span>
          返回
        </div>

        <div class="myhome-background">
          <img :src="bg_data.bg_url"  alt="" />
        </div>

        <!-- <div class="myhome-border"></div> -->
        <div class="myhome-user">
          <div class="myhome-headerimg">
            <img :src="userdata.avatar" alt="" />
          </div>
          <div class="myhome-name">
            <div class="left">
              <span class="myhome-username">{{ userdata.username }}</span>
              <span class="myhome-gender">
                <i class="iconfont icon-nan" v-if="userdata.gender === 1"></i>
                <i
                  class="iconfont icon-nv"
                  v-else-if="userdata.gender === 2"
                ></i>
              </span>
              <div class="follow-content">
                <div class="myfans" @click="goMyFans">
                  粉丝 <span>{{ userdata.fans_str }}</span>
                </div>

                <div class="myfollow" @click="goMyFollow">
                  关注<span>{{ userdata.fllow_COUNT }}</span>
                </div>
              </div>
            </div>
            <div class="right">
                 <div class="follow">
              <button v-if="+followState === 0" class="one">
                <i class="iconfont icon-jiahao"></i><span>互相关注</span>
              </button>
              <button v-else-if="+followState === 1" class="two">
                <i class="iconfont icon-jiahao"></i><span>已关注</span>
              </button>
              <button v-else-if="+followState === 2"  @click="handerFllow" class="three">
                <i class="iconfont icon-jiahao"></i><span>关注</span>
              </button>
            </div>
            <!-- <div class="letter">
              <button><span>私信</span><tton>
            </div> -->
            <div class="other">

              <i class="iconfont icon-qita" @click.stop="showother"></i>
              <div class="other-box" v-if="otherState">
              <!-- <div class="other-item" @click="handerUploadBg" >
                更换背景图片
              </div> -->

            </div>
            </div>
          </div>
          </div>
        </div>
        <div class="myhome-msg">
          <div class="myhome-tag">
            <div class="left">
              <!-- <div class="tag">热门搞笑博主</div>
              <div class="tag">热门搞笑博主</div> -->
            </div>
            <div class="right">
              <i
                :class="
                  isOpen
                    ? 'iconfont icon-anniu_jiantoushouqi_o'
                    : 'iconfont icon-anniu_jiantouzhankai_o'
                "
                @click="isOpen = !isOpen"
              ></i>
            </div>
          </div>
          <div class="myhome-info">
            <div class="myhome-introduction">
              <i class="iconfont icon-gerenjianjie"></i> <span>简介：</span>
              {{ userdata.introduce? userdata.introduce:"暂无简介" }}
            </div>
            <div class="myhome-ip">
              <i class="iconfont icon-ip"></i>所在地：{{userdata.Location}}
            </div>
            <div class="myhome-reg" v-if="isOpen">
              <i class="iconfont icon-rili1"></i
              ><span>{{ userdata.create_time }}</span> 加入宠物视界
            </div>
             <div class="myhome-reg" v-if="isOpen">
              <i class="iconfont icon-loufang"></i
              > 家乡：<span>{{ userdata.homeLocation }}</span>
            </div>
              <div class="myhome-reg" v-if="isOpen">
              <i class="iconfont icon-kehuzhuangtai"></i
              > 情感状态：<span>{{ userdata.emotion }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="myhome-bottom">
        <div
          :class="
            tabCurent === index
              ? 'myhome-bottomname active'
              : 'myhome-bottomname'
          "
          v-for="(data, index) in tablist"
          :key="data.id"
          @click="handerTab(index)"
        >
          {{ data.tab }}
        </div>
      </div>

      <div class="home-main">
        <div class="home-selected">
          <div class="home-hot-main" v-if="tabCurent === 0">热门内容</div>
          <div class="home-article-header" v-else-if="tabCurent === 1">
            <p>
              全部文章<span>({{ allNumber }})</span>
            </p>
          </div>
          <div class="home-hot-list">
            <WaveItem
              v-for="(item,index) in articleList"
              :key="item.cid"
              :dataObj="item"

               :Index="index"
               ref="waves"
              @successDel="handerSuccessDel"
            ></WaveItem>

          </div>
          <div class="LoadingBox">
            <Loading
              noMoreText="没有更多内容了~去其他页面看看吧"
              :loadShow="loadShow"
              :noMoreShow="noMoreShow"
              :loading="loading"
            ></Loading>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '@/util/http'
import scroll from '@/util/scroll'
import { mapState, mapMutations } from 'vuex'
import Loading from '@/components/utilView/loadingView.vue'
import WaveItem from '@/components/wave/waveItem.vue'

export default {
  // 引用vue reload方法
  inject: ['reload'],
  components: {
    WaveItem,
    Loading

  },
  data () {
    return {
      articleList: [], // 文章数据
      allNumber: 0, // 全部文章数量
      page: 1, // 内容列表页码
      isOpen: false, // 显示用户更多数据的变量
      userdata: {}, // 用户数据
      tabCurent: 0, // 内容头部下标值
      tablist: [
        {
          id: 1,
          tab: '精选'
        },
        {
          id: 2,
          tab: '文章'
        }
      ],

      // 背景图数据
      bg_data: {},
      followState: 2, // 登陆用户与被查看用户的关注状态
      isRequest: false, // 网路请求控制
      loadShow: false, // 显示loading页面
      noMoreShow: false, // 没有更多数据提示
      loading: false, // 加载中提示
      headerState: false, // 页面下滑时显示吸顶头部状态
      otherState: false, // 显示用户操作
      titleText: '是否确认删除内容？',
      delIndex: NaN, // 删除文章内容的文章内容下标
      delCid: NaN // 被删除的文章内容的i的

    }
  },
  computed: {
    ...mapState(['user'])

  },
  watch: {
    delArtcle () {

    }
  },
  mounted () {
    window.addEventListener('scroll', this.windowScroll, true) // 监听页面滚动
    // 监听弹窗
    document.addEventListener('click', this.bodyCloseMenus)
    // 用户详情
    // uid 第一个参数登录用户的id  第二个参数uuid是被查看用户的id
    http.userinfo(this.user.uid, this.$route.query.uuid).then((res) => {
      console.log(res.data.userdata)
      this.userdata = res.data.userdata.user
      this.followState = res.data.userdata.user.fllow_mutual
      console.log(this.followState)
      this.bg_data = res.data.userdata.user.user_bg_img
    })
    // 精选内容
    http.userSelected(this.$route.query.uuid, this.user.uid, this.page).then((res) => {
      console.log(res.data)
      this.articleList = res.data.hotlist
      // 判断是否还有足够数据
      if (res.data.hotlist.length < 10) {
        // 没有更多数据
        this.noMore = true
        // 显示没有更多数据
        this.loadShow = true
        this.noMoreShow = true
      }
      this.page++ // 页码自增
    })
  },
  methods: {
    ...mapMutations(['handerConsiderData']),
    // 图片上传成功后刷新页面
    refresh () {
      this.reload()
    },

    // 实现无限加载更多数据
    // 回调函数
    windowScroll () {
      // 获取三个值
      console.log('滚动')
      const scrollTop = scroll.getScrollTop()
      const clientHeight = scroll.getClientHeight()
      const scrollHeight = scroll.getScrollHeight()
      if (parseInt(scrollTop) > 120) {
        setTimeout(() => {
          this.headerState = true
        }, 10)
      } else {
        this.headerState = false
      }
      // 距离底部10px时触发
      if (scrollTop + clientHeight + 10 > scrollHeight) {
        console.log(this.noMore)
        // 发送异步请求请求数据，同时携带offset并自增offset
        // noMore是自定义变量，如果是最后一批数据则以后都不加载
        if (!this.isRequest) {
          if (!this.noMore) {
            // isRequest限制请求的次数 上一次请求返回之前不会进行下一次请求 ，阻止发送多次请求
            this.isRequest = true
            // 显示加载中
            this.loadShow = true
            this.loading = true
            if (this.tabCurent === 0) {
              // 精选内容
              http
                .userSelected(this.user.uid, this.$route.query.uuid, this.page)
                .then((res) => {
                  console.log(res.data)
                  // 隐藏加载更多提示
                  this.loadShow = false
                  this.loading = false
                  this.isRequest = false
                  this.articleList = this.articleList.concat(res.data.hotlist)
                  // 判断是否还有足够数据
                  if (res.data.hotlist.length < 10) {
                    this.noMore = true
                    // 显示没有更多数据
                    this.loadShow = true
                    this.noMoreShow = true
                  }
                  this.page++ // 页码自增
                })
            } else if (this.tabCurent === 1) {
              // 全部文章
              http
                .userMyArticle(this.$route.query.uuid, this.user.uid, this.page)
                .then((res) => {
                  console.log(res.data)
                  // 隐藏加载更多提示
                  this.loadShow = false
                  this.loading = false
                  this.isRequest = false
                  this.articleList = this.articleList.concat(
                    res.data.data.datalist
                  )
                  this.allNumber = res.data.data.article_count
                  // 判断是否还有足够数据
                  if (res.data.data.datalist.length < 10) {
                    this.noMore = true
                    // 显示没有更多数据
                    this.loadShow = true
                    this.noMoreShow = true
                  }
                  this.page++ // 页码自增
                })
            }
          }
        }
      }
    },
    // 返回上一页
    goBack () {
      this.$router.back()
    },
    // 跳转用户资料页
    goData () {
      this.$router.push('/user/userdata')
    },
    // 跳转用户收藏页
    goClocet () {
      this.$router.push('/user/mycare')
    },
    handerTab (i) {
      // 选项高亮
      this.page = 1
      this.tabCurent = i
      if (this.tabCurent === 0) {
        // 精选内容
        http
          .userSelected(this.$route.query.uuid, this.user.uid, this.page)
          .then((res) => {
            console.log(res.data)
            this.articleList = res.data.hotlist
            this.page++ // 页码自增
          })
      } else if (this.tabCurent === 1) {
        // 全部文章
        http
          .userMyArticle(this.$route.query.uuid, this.user.uid, this.page)
          .then((res) => {
            console.log(res.data)
            this.articleList = res.data.data.datalist
            this.allNumber = res.data.data.article_count
            this.page++ // 页码自增
          })
      }
    },
    // 关注用户
    handerFllow () {
      console.log('点击关注')
      http.getfollow(this.user.uid, this.$route.query.uuid, 1).then(res => {
        console.log(res.data)
        if (res.data.ok === 1) {
          this.followState = 1
        }
      })
    },
    // 跳转到粉丝列表
    goMyFans () {
      console.log(this.$route)
      this.$router.push('/user/myfans')
    },
    // 跳转到我的关注列表
    goMyFollow () {
      console.log(this.$route)
      this.$router.push('/user/myfollow')
    },
    // 显示更多事件
    showother () {
      this.otherState = !this.otherState
    },
    // 点击空白隐藏弹窗
    bodyCloseMenus (e) {
      const self = this

      if (self.otherState === true) {
        self.otherState = false
      }
    },

    // 删除文章成功之后
    handerSuccessDel (data) {
      const { index } = data
      this.delIndex = index
      // 拿到删除成功之后的触发
      this.articleList.splice(index, 1)
    }
    // 删除文章弹出框

  },
  unmounted () {
    window.removeEventListener('scroll', this.windowScroll, true) // 销毁滚动事件
    // 页面销毁时移除事件弹窗监听
    document.removeEventListener('click', this.bodyCloseMenus)
    console.log('结束滚动')
  }

}
</script>

<style lang="scss" scoped>
.myhome {
  width: 100%;
  .myhome-box {
    width: 100%;
    height: auto;

    .move-header {
      width: 100%;
      height: 48px;
      background: #fff;
      opacity: 0;
      position: sticky;
      top: 54px;
      z-index: 998;
      .back {
        color: #000;

        font-weight: bold;
        font-size: 20px;
        padding: 15px 0 10px 20px;
        line-height: 22px;
        position: absolute;
        cursor: pointer;
      }
    }
    .move-header-active {
      opacity: 1 !important;
      transition: all 1s;
    }
    .myhome-header {
      width: 100%;
      // min-height: 300px;
      position: relative;
      border-radius: 5px;

      .myhome-back {
        color: #fff;
        font-weight: bold;
        font-size: 20px;
        padding: 15px 0 10px 20px;
        line-height: 22px;
        position: absolute;
        z-index: 9;
        cursor: pointer;
      }

      .myhome-background {
        width: 100%;
        height: 250px;

        overflow: hidden;
        img {
          z-index: 1;
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .myhome-border {
        width: 100%;
        min-height: 150px;
        background: transparent;
        // position: absolute;
        // bottom: 0%;
      }

      .myhome-user {
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        // position: absolute;
        // top: 10%;
        .myhome-headerimg {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
          background: #333;
          position: relative;
          margin: -50px 0 0 20px;
          img {
            z-index: 10;
            width: 100%;
            height: 100%;
            position: absolute;
          }
        }
        .myhome-name {
          color: #000;

          width: 80%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left {
            margin-left: 20px;
            .myhome-username {
              font-weight: bold;
            }

            .myhome-gender {
              i {
                font-size: 20px;
              }
              .icon-nan {
                color: #2196f3;
              }
              .icon-nv {
                color: #f06292;
              }
            }
            .follow-content {
              display: flex;
              span {
                padding: 0 3px;
              }
              .myfans {
                display: flex;
                color: #999;
                font-size: 14px;
                font-weight: normal;
                padding-top: 5px;
                cursor: pointer;
                &:hover {
                  color: #f60;
                }
              }
              .myfollow {
                display: flex;
                color: #999;
                font-size: 14px;
                font-weight: normal;
                padding-top: 5px;
                cursor: pointer;
                padding-left: 10px;
                &:hover {
                  color: #f60;
                }
              }
            }
          }

          .right {
          display: flex;
          .follow {
            font-size: 16px;
            button {
              width: 90px;
              height: 30px;
              border-radius: 50px;
              padding: 5px 0;
              color: #fff;
              cursor: pointer;
              font-weight: bold;
            }
            .one {
              background: #999 !important;
              border: 1px solid #999;
            }
            .two {
              background: #999 !important;
              border: 1px solid #999;
            }
            .three {
              background: #f60 !important;
              border: 1px solid #f60;
            }
          }
          .letter {

            button {
              width: 90px;
              height: 30px;
              background: transparent;
              border-radius: 50px;
              border: 1px solid #333;
              padding: 5px 10px;
              cursor: pointer;
              color: #333;
              font-weight: bold;
            }
          }
          .other {
            margin: 0 20px;
            cursor: pointer;

            position: relative;
            i{
              font-size: 28px;
            }
            .other-box{
              width: 120px;
          min-height: 40px;
          position: absolute;
          border-radius: 5px;
          top: 40px;
          left: -80px ;
          background: #fff;
          box-shadow: 2px 2px 5px rgb(224 224 224), -2px -2px 5px rgb(224 224 224);
              .other-item{
              text-align: center;
            font-size: 14px;
            padding: 12px 0;
            cursor: pointer;
            &:hover{
              background: rgb(224 224 224);
            }
            }
            }

          }
        }
        }
      }

      .myhome-msg {
        .myhome-tag {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #fff;
          padding: 10px 10px 0 25px;
          .left {
            display: flex;
            align-items: center;
            .tag {
              font-size: 12px;
              color: #f60;
              background: #fff3ed;
              height: 30px;
              line-height: 30px;
              border-radius: 20px;
              padding: 0 10px;
              margin-right: 10px;
              cursor: pointer;
            }
          }
          .right i {
            font-size: 22px;
            cursor: pointer;
          }
        }

        .myhome-info {
          font-size: 12px;
          color: #999;
          background: #fff;
          // min-height: auto;
          line-height: 25px;
          padding: 0 0 0 25px;

          i {
            padding-right: 5px;
          }
        }
      }
    }
  @media screen  and (max-width:540px) {
     .myhome-header {
      width: 100%;
      // min-height: 300px;
      position: relative;
      border-radius: 5px;

      .myhome-back {
        color: #fff;
        font-weight: bold;
        font-size: 20px;
        padding: 15px 0 10px 20px;
        line-height: 22px;
        position: absolute;
        z-index: 9;
        cursor: pointer;
      }

      .myhome-background {
        width: 100%;
        height: 5.2rem;

        overflow: hidden;
        img {

          z-index: 1;
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .myhome-border {
        width: 100%;
        min-height: 150px;
        background: transparent;
        // position: absolute;
        // bottom: 0%;
      }

      .myhome-user {
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        // position: absolute;
        // top: 10%;
        .myhome-headerimg {
          width: 2.1rem;
          height: 2.1rem;
          border-radius: 50%;
          overflow: hidden;
          background: #333;
          position: relative;
          margin: -50px 0 0 20px;
          img {
            z-index: 10;
            width: 100%;
            height: 100%;
            position: absolute;
          }
        }
        .myhome-name {
          color: #000;

          width: 80%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left {
            margin-left: 20px;
            .myhome-username {
              font-weight: bold;
              font-size: .34rem;
            }

            .myhome-gender {
              i {
                font-size: 20px;
              }
              .icon-nan {
                color: #2196f3;
              }
              .icon-nv {
                color: #f06292;
              }
            }
            .follow-content {
              display: flex;
              span {
                padding: 0 3px;
              }
              .myfans {
                display: flex;
                color: #999;
                font-size: .3rem;
                font-weight: normal;
                padding-top: 5px;
                cursor: pointer;
                &:hover {
                  color: #f60;
                }
              }
              .myfollow {
                display: flex;
                color: #999;
                font-size: .3rem;
                font-weight: normal;
                padding-top: 5px;
                cursor: pointer;
                padding-left: 10px;
                &:hover {
                  color: #f60;
                }
              }
            }
          }

          .right {
          display: flex;
          .follow {
            font-size: 16px;
            button {
              width: 90px;
              height: 30px;
              border-radius: 50px;
              padding: 5px 0;
              color: #fff;
              cursor: pointer;
              font-weight: bold;
            }
            .one {
              background: #999 !important;
              border: 1px solid #999;
            }
            .two {
              background: #999 !important;
              border: 1px solid #999;
            }
            .three {
              background: #f60 !important;
              border: 1px solid #f60;
            }
          }
          .letter {

            button {
              width: 90px;
              height: 30px;
              background: transparent;
              border-radius: 50px;
              border: 1px solid #333;
              padding: 5px 10px;
              cursor: pointer;
              color: #333;
              font-weight: bold;
            }
          }
          .other {
            margin: 0 20px;
            cursor: pointer;

            position: relative;
            i{
              font-size: 28px;
            }
            .other-box{
              width: 120px;
          min-height: 40px;
          position: absolute;
          border-radius: 5px;
          top: 40px;
          left: -80px ;
          background: #fff;
          box-shadow: 2px 2px 5px rgb(224 224 224), -2px -2px 5px rgb(224 224 224);
              .other-item{
              text-align: center;
            font-size: .14rem;
            padding: 12px 0;
            cursor: pointer;
            &:hover{
              background: rgb(224 224 224);
            }
            }
            }

          }
        }
        }
      }

      .myhome-msg {
        .myhome-tag {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #fff;
          padding: 10px 10px 0 25px;
          .left {
            display: flex;
            align-items: center;
            .tag {
              font-size: 12px;
              color: #f60;
              background: #fff3ed;
              height: 30px;
              line-height: 30px;
              border-radius: 20px;
              padding: 0 10px;
              margin-right: 10px;
              cursor: pointer;
            }
          }
          .right i {
            font-size: 22px;
            cursor: pointer;
          }
        }

        .myhome-info {
          font-size: 12px;
          color: #999;
          background: #fff;
          // min-height: auto;
          line-height: 25px;
          padding: 0 0 0 25px;

          i {
            padding-right: 5px;
          }
        }
      }
    }
  }
    .myhome-bottom {
      width: 100%;
      min-height: 40px;
      margin-bottom: 10px;
      border-radius: 5px;
      border-top: 1px solid #f2f2f2;
      background: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .myhome-bottomname {
        cursor: pointer;
        box-sizing: border-box;
        padding: 10px 0;
        &:hover {
          color: #f60;
        }
      }
      .active {
        color: #f60;
        font-weight: 600;
        border-bottom: 2px solid #f60;
      }
    }
    .home-main {
      width: 100%;
      height: auto;
      background: #fff;
      border-radius: 5px;
      .home-selected {
        width: 100%;
        height: auto;
        .home-hot-main {
          color: #333;
          height: 28px;
          line-height: 28px;
          font-size: 14px;
          border-left: #ff8200 3px solid;
          padding-left: 10px;
          border-bottom: 1px solid #f0f0f0;
        }
        .home-hot-list {
          width: 100%;
          height: auto;
          background: #fff;
          border-radius: 5px;
        }
        .home-article-header {
          color: #333;
          height: 28px;
          line-height: 28px;
          padding-left: 10px;
          p {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
